<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" >

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/turbolinks/5.2.0/turbolinks.js" integrity="sha256-iM4Yzi/zLj/IshPWMC1IluRxTtRjMqjPGd97TZ9yYpU=" crossorigin="anonymous"></script>
  <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
  <link href="https://fonts.googleapis.com/css?family=Cousine|Inconsolata" rel="stylesheet">
  <link rel="shortcut icon" type="image/png" href="/favicon.png">

  <link rel="stylesheet" href="/css/style.css">
  <link rel="stylesheet" href="/css/css/fontawesome-all.min.css">
  <link rel="stylesheet" href="/css/css/work-sans-v7.css">
  <script src="/js/main.js"></script>

  <!-- Begin Jekyll SEO tag v2.6.1 -->
<title>JS: Witness Listing And Voting | Hive Developer</title>
<meta name="generator" content="Jekyll v4.0.0" />
<meta property="og:title" content="JS: Witness Listing And Voting" />
<meta property="og:locale" content="en_US" />
<meta name="description" content="Create a list of available witnesses as well as vote for and remove your vote for a witness." />
<meta property="og:description" content="Create a list of available witnesses as well as vote for and remove your vote for a witness." />
<link rel="canonical" href="witness_listing_and_voting.html" />
<meta property="og:url" content="witness_listing_and_voting.html" />
<meta property="og:site_name" content="Hive Developer" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2020-08-26T11:52:22-07:00" />
<script type="application/ld+json">
{"description":"Create a list of available witnesses as well as vote for and remove your vote for a witness.","mainEntityOfPage":{"@type":"WebPage","@id":"witness_listing_and_voting.html"},"@type":"BlogPosting","url":"witness_listing_and_voting.html","headline":"JS: Witness Listing And Voting","dateModified":"2020-08-26T11:52:22-07:00","datePublished":"2020-08-26T11:52:22-07:00","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->


  
</head>
<body>
<header>
  <h1>
    <button type="button" class="open-nav" id="open-nav"></button>
    <a href="/"  class="logo-link"><img src="/images/logotype_black.svg" height="40" alt="Hive Developer logo"></a>
  </h1>

  
  <form action="/search/" method="get">
    <input type="text" name="q" id="search-input" placeholder="Search">
    <input type="submit" value="Search" style="display: none;">
  </form>
  

  <div id="sidebar" class="sidebar">
	
	
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/">
		<h6 class="ctrl-nav-section title">Introduction</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/#introduction-welcome">Welcome to Hive</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/quickstart/">
		<h6 class="ctrl-nav-section title">Quickstart</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/quickstart/#quickstart-choose-library">Choose Library</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-hive-full-nodes">Hive Nodes</a></li>
						
					
						
						<li><a href="/quickstart/#quickstart-testnet">Hive Testnet</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/tutorials/">
		<h6 class="ctrl-nav-section title">Tutorials</h6>
		<ul class="cont-nav-section content">
			
				
					
						<li><a href="/tutorials/#tutorials-javascript">Javascript</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-python">Python</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-ruby">Ruby</a></li>
					
				
					
						<li><a href="/tutorials/#tutorials-recipes">Recipes</a></li>
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/services/">
		<h6 class="ctrl-nav-section title">Services</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/services/#services-hive-blog">hive.blog</a></li>
						
					
						
						<li><a href="/services/#services-hivesigner">HiveSigner</a></li>
						
					
						
						<li><a href="/services/#services-jussi">Jussi</a></li>
						
					
						
						<li><a href="/services/#services-imagehoster">ImageHoster</a></li>
						
					
						
						<li><a href="/services/#services-dhf">DHF</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/apidefinitions/">
		<h6 class="ctrl-nav-section title">Appbase API</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/apidefinitions/#apidefinitions-condenser-api">Condenser Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-bridge">Bridge</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-by-key-api">Account By Key Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-account-history-api">Account History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-block-api">Block Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-database-api">Database Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-debug-node-api">Debug Node Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-follow-api">Follow Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-jsonrpc">Jsonrpc</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-market-history-api">Market History Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-network-broadcast-api">Network Broadcast Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rc-api">Rc Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-reputation-api">Reputation Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-rewards-api">Rewards Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-tags-api">Tags Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-transaction-status-api">Transaction Status Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-witness-api">Witness Api</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops">Broadcast Ops</a></li>
						
					
						
						<li><a href="/apidefinitions/#apidefinitions-broadcast-ops-communities">Broadcast Ops Communities</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/resources/">
		<h6 class="ctrl-nav-section title">Resources</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/resources/#resources-overview">Overview</a></li>
						
					
						
						<li><a href="/resources/#resources-client-libs">Client Libraries</a></li>
						
					
						
						<li><a href="/resources/#resources-bluepaper">Bluepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-whitepaper">Whitepaper</a></li>
						
					
						
						<li><a href="/resources/#resources-tools">Tools</a></li>
						
					
						
						<li><a href="/resources/#resources-hivesigner-libs">Hivesigner Libs</a></li>
						
					
						
						<li><a href="/resources/#resources-hive-keychain">Hive Keychain</a></li>
						
					
						
						<li><a href="/resources/#resources-developeradvocate">Community & Help</a></li>
						
					
				
			
		</ul>
	</section>
	
		
    <section class="pnl-main-nav-section main-nav-section" url="/glossary/">
		<h6 class="ctrl-nav-section title">Glossary</h6>
		<ul class="cont-nav-section content">
			
				
					
					
						
						<li><a href="/glossary/#glossary-chain-basics">Chain Basics</a></li>
						
					
						
					
						
						<li><a href="/glossary/#glossary-governance">Governance</a></li>
						
					
						
						<li><a href="/glossary/#glossary-transactions">Transactions</a></li>
						
					
						
						<li><a href="/glossary/#glossary-api">API</a></li>
						
					
						
						<li><a href="/glossary/#glossary-market">Market</a></li>
						
					
				
			
		</ul>
	</section>
	
</div>



  <link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</header>
<div class="main" id="top">
  <div class="hero">
    <h1 class="hero__h1">Hive Developer Portal </h1>
    <img class="hero__img" src="/images/honey-comb-92.png" style="position: relative; top: 10px;" />
  </div>
  <section id="tutorials-javascript-witness-listing-and-voting" class="row tutorials-javascript-witness-listing-and-voting">
	<h3>
		<a id="tutorials-javascript-witness-listing-and-voting">
			JS: Witness Listing And Voting
			
		</a>
	</h3>
	
		<span class="description"><p><em>Create a list of available witnesses as well as vote for and remove your vote for a witness.</em></p>
</span>
	

	<p><span class="fa-pull-left top-of-tutorial-repo-link"><span class="first-word">Full</span>, runnable src of <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript/tutorials/22_witness_listing_and_voting">Witness Listing And Voting</a> can be downloaded as part of: <a href="https://gitlab.syncad.com/hive/devportal/-/tree/master/tutorials/javascript">tutorials/javascript</a>.</span>
<br /></p>

<p>This tutorial will take you through the process of preparing and submitting a <code class="highlighter-rouge">vote</code> using the <code class="highlighter-rouge">broadcast</code> operation. A demo account is provided to use on the <code class="highlighter-rouge">testnet</code> but all variables can be easily changed and applied to the <code class="highlighter-rouge">production server</code>.</p>

<p>There is also an alternative method to vote for a witness using a <code class="highlighter-rouge">hot signing</code> link that can be generated via <a href="https://steemconnect.com/sign/">Steemconnect</a>. You create a link using the <code class="highlighter-rouge">witness</code> name and the <code class="highlighter-rouge">approve</code> fields which denotes whether you want to vote for or remove the vote. This <a href="https://v2.steemconnect.com/sign/account-witness-vote?witness=grg&amp;approve=approve">link</a> then allows you to vote simply by signing in with your account details. This is a very simple way to send a vote request to any other user with the correct details already provided by the link.</p>

<h2 id="intro">Intro</h2>

<p>We are using the <code class="highlighter-rouge">account witness vote</code> function to create the vote which we then commit to the steem blockchain with a <code class="highlighter-rouge">broadcast</code> operation from <code class="highlighter-rouge">dsteem</code>. We also look at the vote status for a specific user using the <code class="highlighter-rouge">getAccounts</code> function. The parameters required for the witness voting operation are:</p>

<ol>
  <li><em>limit</em> - Used in creating the witness list. Denotes the maximum number of witnesses to display</li>
  <li><em>voter</em> - This is the account making the vote</li>
  <li><em>privatekey</em> - The private active key of the voter account</li>
  <li><em>witness</em> - The name of the witness being voted for</li>
  <li><em>approve</em> - This is a boolean value determining whether the voting opration is to vote for, or to remove a vote</li>
</ol>

<h2 id="steps">Steps</h2>

<ol>
  <li><a href="#connection"><strong>Configure connection</strong></a> Configuration of <code class="highlighter-rouge">dsteem</code> to communicate with a Steem blockchain</li>
  <li><a href="#createlist"><strong>Create witness list</strong></a> Displaying a list of active witnesses</li>
  <li><a href="#input"><strong>Input variables</strong></a> Collecting the required inputs via an HTML UI</li>
  <li><a href="#status"><strong>Voting status</strong></a> Confirming the current vote status for the selected witness</li>
  <li><a href="#broadcast"><strong>Broadcast</strong></a> Creating an object and broadcasting the vote to the blockchain</li>
</ol>

<h4 id="1-configure-connection">1. Configure connection<a name="connection"></a></h4>

<p>As usual, we have a <code class="highlighter-rouge">public/app.js</code> file which holds the Javascript segment of the tutorial. In the first few lines we define the configured library and packages:</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="k">import</span> <span class="p">{</span> <span class="nx">Client</span><span class="p">,</span> <span class="nx">PrivateKey</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">dsteem</span><span class="dl">'</span><span class="p">;</span>
<span class="k">import</span> <span class="p">{</span> <span class="nx">Testnet</span> <span class="k">as</span> <span class="nx">NetConfig</span> <span class="p">}</span> <span class="k">from</span> <span class="dl">'</span><span class="s1">../../configuration</span><span class="dl">'</span><span class="p">;</span> <span class="c1">//A Steem Testnet. Replace 'Testnet' with 'Mainnet' to connect to the main Steem blockchain.</span>

<span class="kd">let</span> <span class="nx">opts</span> <span class="o">=</span> <span class="p">{</span> <span class="p">...</span><span class="nx">NetConfig</span><span class="p">.</span><span class="nx">net</span> <span class="p">};</span>
<span class="c1">//connect to a steem node, testnet in this case</span>
<span class="kd">const</span> <span class="nx">client</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Client</span><span class="p">(</span><span class="nx">NetConfig</span><span class="p">.</span><span class="nx">url</span><span class="p">,</span> <span class="nx">opts</span><span class="p">);</span>
</code></pre></div></div>

<p>Above, we have <code class="highlighter-rouge">dsteem</code> pointing to the test network with the proper chainId, addressPrefix, and endpoint by importing from the <code class="highlighter-rouge">configuration.js</code> file. Because this tutorial is interactive, we will not publish test content to the main network. Instead, we’re using the testnet and a predefined account which is imported once the application loads, to demonstrate witness voting.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">window</span><span class="p">.</span><span class="nx">onload</span> <span class="o">=</span> <span class="k">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="kd">const</span> <span class="nx">account</span> <span class="o">=</span> <span class="nx">NetConfig</span><span class="p">.</span><span class="nx">accounts</span><span class="p">[</span><span class="mi">0</span><span class="p">];</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">username</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">account</span><span class="p">.</span><span class="nx">address</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">activeKey</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">account</span><span class="p">.</span><span class="nx">privActive</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>

<h4 id="2-create-witness-list">2. Create witness list<a name="createlist"></a></h4>

<p>We create a list of the current active witnesses available. This gives a list from which to select a witness to vote for. The list retrieved from the blockchain has a maximum length of 100 witnesses. We query the blockchain with the <code class="highlighter-rouge">getState</code> function and then use a <code class="highlighter-rouge">for loop</code> to display the list. This function is initiated once the user inputs a value for the <code class="highlighter-rouge">limit</code> variable and clicks on the “Fetch current Witnesses” button.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">window</span><span class="p">.</span><span class="nx">createList</span> <span class="o">=</span> <span class="k">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="c1">//get list limit</span>
    <span class="kd">const</span> <span class="nx">limit</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">limit</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>

    <span class="kd">const</span> <span class="nx">witnessdata</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">client</span><span class="p">.</span><span class="nx">database</span><span class="p">.</span><span class="nx">getState</span><span class="p">(</span><span class="dl">'</span><span class="s1">witnesses</span><span class="dl">'</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">witnesses</span> <span class="o">=</span> <span class="p">[];</span>

    <span class="k">for</span> <span class="p">(</span><span class="kd">const</span> <span class="nx">witness</span> <span class="k">in</span> <span class="nx">witnessdata</span><span class="p">.</span><span class="nx">witnesses</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">witness</span><span class="dl">'</span><span class="p">,</span> <span class="nx">witness</span><span class="p">);</span>
        <span class="nx">witnesses</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span>
            <span class="s2">`&lt;li&gt;&lt;a href="#" onclick="document.getElementById('witness').value = '</span><span class="p">${</span><span class="nx">witness</span><span class="p">}</span><span class="s2">';"&gt;</span><span class="p">${</span><span class="nx">witness</span><span class="p">}</span><span class="s2">&lt;/a&gt;&lt;/li&gt;`</span>
        <span class="p">);</span>
    <span class="p">}</span>
    <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="dl">'</span><span class="s1">witnesses</span><span class="dl">'</span><span class="p">,</span> <span class="nx">witnesses</span><span class="p">);</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">witnessList</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">witnesses</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="dl">''</span><span class="p">);</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">witnessListContainer</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">flex</span><span class="dl">'</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>

<h4 id="3-input-variables">3. Input variables<a name="input"></a></h4>

<p>The required parameters for the vote operation is recorded via an HTML UI that can be found in the <code class="highlighter-rouge">public/index.html</code> file. The values are pre-populated in this case with a testnet <code class="highlighter-rouge">demo</code> account.</p>

<p>The parameter values are allocated as seen below, once the user clicks on the “Submit Vote” button.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">window</span><span class="p">.</span><span class="nx">submitVote</span> <span class="o">=</span> <span class="k">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="c1">//get all values from the UI</span>
    <span class="c1">//get account name of voter</span>
    <span class="kd">const</span> <span class="nx">voter</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">username</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
    <span class="c1">//get private active key</span>
    <span class="kd">const</span> <span class="nx">privateKey</span> <span class="o">=</span> <span class="nx">dsteem</span><span class="p">.</span><span class="nx">PrivateKey</span><span class="p">.</span><span class="nx">fromString</span><span class="p">(</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">activeKey</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span>
    <span class="p">);</span>
    <span class="c1">//get witness name</span>
    <span class="kd">const</span> <span class="nx">witness</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">witness</span><span class="dl">'</span><span class="p">).</span><span class="nx">value</span><span class="p">;</span>
</code></pre></div></div>

<h4 id="4-voting-status">4. Voting status<a name="status"></a></h4>

<p>The <code class="highlighter-rouge">approve</code> parameter within the vote function determines whether the user is voting for the witness or removing its vote. In order to get the correct value for this parameter we first need to identify whether the user has already voted for the specified witness or not. One of the fields from the account information (blockchain query) holds an array of all the witnesses currently voted for by the user. The check returns <code class="highlighter-rouge">true</code> if the user has already voted for the selected witness. The result of this query is displayed and the user is given a choice whether to proceed with the vote/unvote process or stop the process activating a new function for each of those choices.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>    <span class="c1">//check if witness is already voted for</span>
    <span class="nx">_data</span> <span class="o">=</span> <span class="k">new</span> <span class="nb">Array</span>
    <span class="nx">_data</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">client</span><span class="p">.</span><span class="nx">database</span><span class="p">.</span><span class="nx">getAccounts</span><span class="p">([</span><span class="nx">voter</span><span class="p">]);</span>
    <span class="kd">const</span> <span class="nx">witnessvotes</span> <span class="o">=</span> <span class="nx">_data</span><span class="p">[</span><span class="mi">0</span><span class="p">][</span><span class="dl">"</span><span class="s2">witness_votes</span><span class="dl">"</span><span class="p">];</span>
    <span class="kd">const</span> <span class="nx">approve</span> <span class="o">=</span> <span class="nx">witnessvotes</span><span class="p">.</span><span class="nx">includes</span><span class="p">(</span><span class="nx">witness</span><span class="p">);</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">approve</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">checkresult</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Witness has already been voted for, would you like to remove vote?</span><span class="dl">"</span>
        <span class="nx">votecheck</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Vote removed</span><span class="dl">"</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="nx">checkresult</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Witness has not yet been voted for, would you like to vote?</span><span class="dl">"</span>
        <span class="nx">votecheck</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">Vote added</span><span class="dl">"</span>
    <span class="p">}</span>

    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">voteCheckContainer</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">flex</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">voteCheck</span><span class="dl">'</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">form-control-plaintext alert alert-success</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">voteCheck</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">checkresult</span><span class="p">;</span>

    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">submitYesBtn</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">visibility</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">visible</span><span class="dl">"</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">"</span><span class="s2">submitNoBtn</span><span class="dl">"</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">visibility</span> <span class="o">=</span> <span class="dl">"</span><span class="s2">visible</span><span class="dl">"</span><span class="p">;</span>
</code></pre></div></div>

<h4 id="5-broadcast">5. Broadcast<a name="broadcast"></a></h4>

<p>When the user decides to continue with the voting process the actual vote function is triggered and we create a <code class="highlighter-rouge">vote object</code> with the input variables before we can broadcast to the blockchain.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">window</span><span class="p">.</span><span class="nx">submitYes</span> <span class="o">=</span> <span class="k">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
        <span class="c1">//create vote object</span>
        <span class="kd">const</span> <span class="nx">vote</span> <span class="o">=</span> <span class="p">[</span>
        <span class="dl">'</span><span class="s1">account_witness_vote</span><span class="dl">'</span><span class="p">,</span>
        <span class="p">{</span> <span class="na">account</span><span class="p">:</span> <span class="nx">voter</span><span class="p">,</span> <span class="na">witness</span><span class="p">:</span> <span class="nx">witness</span><span class="p">,</span> <span class="na">approve</span><span class="p">:</span> <span class="o">!</span><span class="nx">approve</span> <span class="p">},</span>
        <span class="p">];</span>
</code></pre></div></div>

<p>The array cotains the function for the witness vote along with an object containing the needed parameters. We have to use the opposite of the <code class="highlighter-rouge">approve</code> variable that we created in the previous step. That variable is <code class="highlighter-rouge">true</code> if the user has already voted, and a value of <code class="highlighter-rouge">true</code> for the <code class="highlighter-rouge">approve</code> parameter means that the user is voting <em>for</em> the specified witness which will then return an error.</p>

<p>After the object has been created we can <code class="highlighter-rouge">broadcast</code> the operation to the steem blockchain along with the private active key of the user. The result of the vote is displayed on the UI to confirm whether you voted for or removed a vote for the witness as well as error details should there be one.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//broadcast the vote</span>
<span class="nx">client</span><span class="p">.</span><span class="nx">broadcast</span><span class="p">.</span><span class="nx">sendOperations</span><span class="p">([</span><span class="nx">vote</span><span class="p">],</span> <span class="nx">privateKey</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span>
    <span class="kd">function</span><span class="p">(</span><span class="nx">result</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span>
            <span class="dl">'</span><span class="s1">included in block: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">result</span><span class="p">.</span><span class="nx">block_num</span><span class="p">,</span>
            <span class="dl">'</span><span class="s1">expired: </span><span class="dl">'</span> <span class="o">+</span> <span class="nx">result</span><span class="p">.</span><span class="nx">expired</span>
        <span class="p">);</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">voteCheckContainer</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">flex</span><span class="dl">'</span><span class="p">;</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">voteCheck</span><span class="dl">'</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span>
            <span class="dl">'</span><span class="s1">form-control-plaintext alert alert-success</span><span class="dl">'</span><span class="p">;</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">voteCheck</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">votecheck</span><span class="p">;</span>
    <span class="p">},</span>
    <span class="kd">function</span><span class="p">(</span><span class="nx">error</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">console</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="nx">error</span><span class="p">);</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">voteCheckContainer</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">flex</span><span class="dl">'</span><span class="p">;</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">voteCheck</span><span class="dl">'</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span>
            <span class="dl">'</span><span class="s1">form-control-plaintext alert alert-danger</span><span class="dl">'</span><span class="p">;</span>
        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">voteCheck</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span> <span class="nx">error</span><span class="p">.</span><span class="nx">jse_shortmsg</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">);</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">submitYesBtn</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">visibility</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">submitNoBtn</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">visibility</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">;</span>
</code></pre></div></div>

<p>Should the user choose to stop the process the following function is executed.</p>

<div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="nb">window</span><span class="p">.</span><span class="nx">submitNo</span> <span class="o">=</span> <span class="k">async</span> <span class="p">()</span> <span class="o">=&gt;</span> <span class="p">{</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">voteCheckContainer</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">display</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">flex</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">voteCheck</span><span class="dl">'</span><span class="p">).</span><span class="nx">className</span> <span class="o">=</span>
        <span class="dl">'</span><span class="s1">form-control-plaintext alert alert-success</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">voteCheck</span><span class="dl">'</span><span class="p">).</span><span class="nx">innerHTML</span> <span class="o">=</span>
        <span class="dl">'</span><span class="s1">Vote process has ben cancelled</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">submitYesBtn</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">visibility</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">;</span>
    <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="dl">'</span><span class="s1">submitNoBtn</span><span class="dl">'</span><span class="p">).</span><span class="nx">style</span><span class="p">.</span><span class="nx">visibility</span> <span class="o">=</span> <span class="dl">'</span><span class="s1">hidden</span><span class="dl">'</span><span class="p">;</span>
<span class="p">};</span>
</code></pre></div></div>

<p>The option buttons (continue with voting process or stop) are disabled at the end of the process in order to remove confusion on what to do next or what the option buttons will do.</p>

<h3 id="to-run-this-tutorial">To run this tutorial</h3>

<ol>
  <li><code class="highlighter-rouge">git clone https://gitlab.syncad.com/hive/devportal.git</code></li>
  <li><code class="highlighter-rouge">cd devportal/tutorials/javascript/22_witness_listing_and_voting</code></li>
  <li><code class="highlighter-rouge">npm i</code></li>
  <li><code class="highlighter-rouge">npm run dev-server</code> or <code class="highlighter-rouge">npm run start</code></li>
  <li>After a few moments, the server should be running at <a href="http://localhost:3000/">http://localhost:3000/</a></li>
</ol>

<hr />

</section>

</div>
<div class="footer">
  <a href="#">Back to top</a>
</div>
<script>
    document.getElementById("open-nav").addEventListener("click", function () {
        document.body.classList.toggle("nav-open");
    });
</script>
</body>
</html>


<script src="/js/adjust.js"></script>

